<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="文章编号"
        prop="article.id"
      >
      </el-table-column>
      <el-table-column
        label="标题"
        prop="article.title"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <el-table-column
        label="内容"
        prop="article.content"
        :show-overflow-tooltip=true
      >
      </el-table-column>
      <el-table-column
        label="作者"
        prop="user.username"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="article.date">
      </el-table-column>
      <el-table-column>
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入文章编号搜索"
            @keyup.enter.native ="searchKey"
          />
        </template>
        <template slot-scope="scope">
        <el-button
          size="small"
          type="danger"
          @click="open(scope.row)">删除<i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page ref="page"></Page>
    <Result ref="result"></Result>
    <Identity ref="legal"></Identity>
  </div>
</template>

<script>
import Identity from './identity'
import Page from '../base/Page'
import Result from '../base/MessageResult'
export default {
  name: 'Article_list',
  components: {Page, Result, Identity},
  data () {
    return {
      tableData: [{}],
      search: '',
      pageSize: 3
    }
  },
  mounted () {
    this.$refs.legal.isLegal()
    // 加载分页数据、分页条
    this.$refs.page.showPage('article', 1, this.pageSize)
    this.$refs.page.showPagination('article')
    this.$refs.page.type = 'article'
  },
  methods: {
    open (row) {
      var r = this
      this.confirm = '确定'
      this.$confirm('确定删除该文章吗', '提示', {
        confirmButtonText: this.confirm,
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).then(
        () => {
          if (!r.confirm.includes('确定', 0)) {
            return
          }
          this.handleDelete(row)
        }
      )
    },
    handleDelete (row) {
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/deleteArticle?id=' + row.article.id)
        .then(function (response) {
          if (response.data === 1) {
            that.$refs.result.success('删除文章成功')
          } else {
            that.$refs.result.success('删除文章失败')
          }
          that.$refs.page.showPage('article', that.$refs.page.currentPage, that.pageSize)
          that.$refs.page.showPagination('article', that.pageSize)
        }, function () {
          that.$refs.result.fail('该文章存在评论，请先删除评论')
        }
        )
    },
    searchKey () {
      if (this.search === '') {
        this.$refs.page.showPage('article', 1, this.pageSize)
        return
      }
      var that = this
      this.axios.get('http://localhost:8080/linearAlgebra/findArticle?id=' + that.search)
        .then(function (response) {
          that.tableData = response.data
        })
    }
  }
}
</script>

<style scoped>

</style>
